<script setup>
import {useRouter} from 'vue-router'
import {computed, defineProps} from 'vue'
import { userStore } from '@/stores/user.js'
import {  getDistance } from '@/utils/index'
import { extractAddressInfo } from '@/utils/index'
import KeywordColor from "@/components/keyword-color/KeywordColor.vue";
   
const props = defineProps({
  data: Object,
  loading: Boolean,
  keywords: Array
})

const keyWordStyleObject = {
  color: '#4FAC91'
}

const styleObject = {
  'font-size': '1.6rem',
  'font-weight': 'bold',
  'color': '#333333'
}

const fileUrl = import.meta.env.VITE_FILE_URL

const router = useRouter()

const goScenicDetailClick = () => {
  if (props.loading) {
    return
  }
  router.push(`/hotpot/${props.data.id}`)
}

const getImageUrl = () => {
  return `${fileUrl}/${props.data?.coverImage}`
}

const labelList = computed(() => {
  const list = props.data.labels?.split(',') ?? []
  return list.filter(item => item)
})


</script>

<template>
  <div class="card">
    <div v-if="!props.loading" @click="goScenicDetailClick()">
      <div class="image_box">
        <van-image
          lazy-load
          width="100%"
          height="100%"
          :src="data?.coverImageUrl"
          radius=".8rem"
        >
          <!-- :src="getImageUrl()" -->
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
      <div class="name">
        <KeywordColor
          :text="data?.scenicAreaName"
          :keywords="props.keywords"
          :styleObject="styleObject"
          :keyWordStyleObject="keyWordStyleObject"
        />
      </div>
      <div class="label_list">
        <div class="label" v-for="item in labelList" :key="item">{{ item }}</div>
      </div>
      <div class="location">
        <div class="left">
          <img class="location_img" src="@/assets/images/icons/location_999999.png" alt="">
          <span class="address">{{ extractAddressInfo(data.address) }}</span>
<!--          <span class="line" v-if="data?.distance && data?.address"> | </span>-->
<!--          <span class="distance" v-if="data?.distance">距您{{ getDistance(data?.distance) }}</span>-->
        </div>
      </div>
    </div>
    <van-skeleton v-else>
      <template #template>
        <div :style="{  width: '100%' }">
          <van-skeleton-image :style="{  width: '100%' }"/>
          <div :style="{ margin: '.8rem 0' }">
            <van-skeleton-paragraph row-width="10rem"/>
            <van-skeleton-paragraph row-width="10rem"/>
          </div>
        </div>
      </template>
    </van-skeleton>
  </div>

</template>

<style scoped lang="scss">
.card {
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 .7rem 1.5rem 0 rgba(54,141,88,0.05);
  .name {
    display: flex;
    align-items: center;
    margin: 1rem 0 .6rem 0;
    h3{
      height: 2.2rem;
      font-size: 1.6rem;
      font-weight: bold;
      color: #333333;
      line-height: 2.2rem;
      margin-right: .5rem;
    }
  }
  .label_list{
    display: flex;
    flex-wrap: wrap;
    margin-top: .2rem;
    .label{
      margin-bottom: .8rem;
      margin-right: .5rem;
      padding: 0 .5rem;
      height: 1.7rem;
      line-height: 1.7rem;
      background: rgba(125,188,154,0.2);
      border-radius: .3rem;
      font-size: 1.2rem;
      color: #35AD6D;
    }
  }
  .location{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    color: #999999;
    margin-bottom: .5rem;
    width: 100%;
    .left{
      flex: 1;
      .location_img{
        width: 1.1rem;
        margin-right: .5rem;
        flex-shrink: 0;
      }
      .address{
        height: 1.6rem;
      }
      .line{
        margin: 0 .4rem;
      }
      .distance{
        white-space: nowrap;
      }
    }
  }
}
</style>
